<script setup>
import { GetOrderListAPI } from '@/apis/order';
import { currentTime, formatDateTime } from '@/utils/dayjs';
import { ElMessage } from 'element-plus';

const tableData = ref([])
const pageData = ref({
  pageSize: 5,
  pageNum: 1
})

const total = ref(0)
const getDate = async () => {
  const result = await GetOrderListAPI(pageData.value)
  tableData.value = result.orderListAllPOs
  total.value = result.pageTotal
}
const onSizeChange = (value) => {
  pageData.value.pageSize = value
  getDate()
}
const onCurrentChange = (value) => {
  pageData.value.pageNum = value
  getDate()
}

const RefRefresh = ref()
const isRefreshing = ref(false);
const RefreshFn = async () => {
  if(isRefreshing.value) {
    return
  }
 isRefreshing.value = true
 await getDate()
 ElMessage.success("更新数据成功")
 setTimeout(() => {
  isRefreshing.value = false
 }, 3000)
}


const loading = ref(true)
onMounted(async() => {
  await getDate()
  loading.value = false
})
</script>

<template>
    <el-table
      :data="tableData"
      stripe
      default-sort="{ prop: 'createOrderTime', order: 'descending' }"
      style="width: 100%; min-height: 500px;"
      v-loading="loading"
      element-loading-text="加载中..."
    >
        <el-table-column prop="shop" label="购买书名" width="100" />
        <el-table-column sortable="false" prop="id" label="订单号" width="100" />
        <el-table-column prop="name" label="下单人" width="100" />
        <el-table-column sortable prop="createOrderTime" label="下单时间" width="120" >
          <template #default="{row}">
            {{ formatDateTime(row.createOrderTime) || '数据加载中' }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="100" />
        <el-table-column prop="address" label="地址" width="250" />
        <el-table-column prop="payStatus" label="支付状态" width="120"  >
          <template #default="scope">
            <el-tag type="warning" v-if="scope.row.payStatus === 1">未支付</el-tag>
            <el-tag type="success" v-else>已支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="payMoney" label="支付金额" width="100" />
        <el-table-column prop="payOrderTime" label="支付时间" width="120"  />
        <el-table-column prop="isFinish" label="收获状态" width="120">
          <template #default="scope">
            <el-tag type="warning" v-if="scope.row.isFinish === 0">未收货</el-tag>
            <el-tag type="success" v-else>收货</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="50px">
          <template #header>
            <div ref="RefRefresh" class="Refresh" :class="{ 'disabled': isRefreshing }" @click="RefreshFn">
              <el-icon size="35px" class="hoverColor"><Refresh /></el-icon>
            </div>

          </template>
        </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="pageData.pageNum"
      v-model:page-size="pageData.pageSize"
      :page-sizes="[ 3, 5, 7]"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
</template>


<style lang="scss" scoped>
.Refresh {
  cursor: pointer;
}
.hoverColor:hover {
  color: red;
}

.disabled {
  // pointer-events: none;
  cursor: not-allowed !important;
  // pointer-events: none; /* 禁用点击事件 */
  // opacity: 0.6; /* 可选：降低透明度以表示禁用 */
}
.disabled .hoverColor:hover {
  color: #909399 !important;
}
</style>
